https://juejin.cn/post/6955636911214067720#heading-21
https://mp.weixin.qq.com/s/A1oV--p5NpiKjtdFv9ODBQ
区别：

1.对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；
2.对于事件函数处理语法，原生事件为字符串，react 事件为函数；
3.react 事件不能采用 return false 的方式来阻止浏览器的默认行为，
而必须要地明确地调用preventDefault()来阻止默认行为。

合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：
（合成事件：event.syntheticEvent）（原生事件：event.nativeEvent）

兼容所有浏览器，更好的跨平台；
将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。
方便 react 统一管理和事务机制。

事件的执行顺序为原生事件先执行，合成事件后执行，
（浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。
节点上的原生事件的执行是在目标阶段，
然而合成事件的执行是在冒泡阶段，所
以原生事件会先合成事件执行，然后再往父节点冒泡。）

合成事件会冒泡绑定到 document 上（
注意：React17事件统一绑定container上，ReactDOM.render(app， container);
而不是document上，这样好处是有利于微前端的，微前端一个前端系统中可能有多个应用，
如果继续采取全部绑定在document上，那么可能多应用下会出现问题。），

注意：
react并不是一开始，把所有的事件都绑定在document上，
而是采取了一种按需绑定，比如发现了onClick事件,再去绑定document click事件。

所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，
因为需要冒泡到document 上合成事件才会执行。

<!-- 对于同一个 DOM 分别绑定原生事件、合成事件, 
  在原生事件中阻止事件冒泡为什么会阻止合成事件的执行？ -->

合成事件是事件委托的一种实现, 主要是利用事件冒泡机制将所有事件在 document 进行统一处理, 
根据 事件流, 事件执行顺序为 捕获阶段、目标阶段、冒泡阶段,
 当我们在原生事件上阻止事件冒泡, 那么事件就无法冒泡到 document, 那么合成事件自然无法执行！

<!-- 为什么阻止合成事件不会阻止原生事件的执行 -->
因为原生的事件先于合成的执行（目标阶段），所以合成事件内阻止的只是合成的事件冒泡（冒泡阶段）。

<!-- React 为什么要将所有事件绑定在 document 上, 这么做有什么优缺点吗? -->
优点:

1.减少事件注册, 减少内存消耗, 提升性能, 不需要注册那么多的事件了, 
一种事件类型只在 document 上注册一次即可; 
举个例子, 若有 10w 项列表, 点击列表某一项要提示这一列表的某个信息, 
若在每一个 li 节点挂载事件, 10w 个事件将会极大程度上拖慢你的浏览器性能
2.统一处理, 并提供合成事件对象, 抹平浏览器的兼容性差异

缺点: 如果层级过多, 冒泡过程中可能会被某层给阻止掉

<!-- 从 v17.0.0 开始, React 不再将事件处理添加到 document 上, 
  而是将事件处理添加到渲染 React 树的根容器中这又是为什么呢? -->
1.如果页面上有多个 React 版本, 事件都会被附加在 document 上, 
这时嵌套的 React 树调用 e.stopPropagation() 停止了事件冒泡,
外部的树仍会接收到该事件(因为只是阻止了 React 事件的冒泡), 这就使嵌套不同版本的 React 难以实现

2.如果你系统只用了一个 react 版本, 那没啥区别; 
但有些复杂的系统, 由于历史原因, 或者用了微前端, 它就同时用很多个版本的 react, 
这就不一样了, 如果很多个版本的 react, 都往 document 上去绑定, 就容易出现混乱
